<template>
  <div class="app-product-tab content-tabs">
    <van-tabs v-model="active" :swipe-threshold="5" title-inactive-color="#3a3a3a" title-active-color="#D8182D" background="transparent" animated>
      <van-tab v-for="(list, index) in tabArray" :key="index" :title="list.describe" :name="list.type">
        <template #title>
          <div class="slot-title">
            <b class="tab-title">{{ list.title }}</b>
            <span class="tab-name">{{ list.name }}</span>
          </div>
        </template>

        <section class="goods-box search-wrap">
          <ul class="goods-content">
            <li v-for="(item, goodsIndex) in list.list" :key="goodsIndex">
              <router-link class="goods-img" tag="div" to="/classify/product">
                <img :src="item.img" />
              </router-link>
              <div class="goods-layout">
                <div class="goods-title">{{ item.productName }}</div>
                <span class="goods-div">{{ item.title }}</span>
                <div class="goods-desc">
                  <span class="goods-price">
                    <i>{{ item.productCnyPrice }}</i>
                    <span class="force-value">{{ item.forceValue }}倍算力</span>
                  </span>
                  <span class="add-icon" @click="addToCart($event, item)">
                    <plus-circle-outlined class="icon" />
                  </span>
                </div>
              </div>
            </li>
          </ul>
        </section>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { reactive, toRefs, ref, defineComponent } from 'vue'
import { PlusCircleOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  components: {
    PlusCircleOutlined,
  },
  setup() {
    const state = reactive({
      homeImgs: [],
      tabArray: [],
    })
    const active = ref('')

    const { images, tabList } = window.HomeData
    state.tabArray = tabList
    state.homeImgs = images

    return {
      ...toRefs(state),
      active,
    }
  },
})
</script>

<style lang="scss"></style>
